<template>
    <div>
      <table border="1" width="700" style="border-collapse: collapse">
        <caption>
          购物车
        </caption>
        <thead>
          <tr>
            <th>
              <input type="checkbox" v-model="cop" /> <span>全选</span>
            </th>
            <th>名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>总价</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <Gwctr v-for="(obj,index) in goodList" :key="index" :list="obj" :index="index" @change="fn"></Gwctr>
        </tbody>
        <tfoot>
          <tr>
            <td>合计:</td>
            <td colspan="5">
              {{sum}}
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
  </template>
  
  <script>
  import Gwctr from '@/components/GwcTr'
  export default {
    data() {
      return {
        goodList: [
          {
            name: "诸葛亮",
            price: 1000,
            num: 1,
            checked: false,
          },
          {
            name: "蔡文姬",
            price: 1500,
            num: 1,
            checked: false,
          },
          {
            name: "妲己",
            price: 2000,
            num: 1,
            checked: false,
          },
          {
            name: "鲁班",
            price: 2200,
            num: 1,
            checked: false,
          },
        ],
      };
    },
    components: {
      Gwctr,
    },
    methods: {
      fn(ind) {
          this.goodList.splice(ind,1)
      }
    },
    computed: {
      cop: {
        set(val) {
          this.goodList.forEach(item => item.checked = val)
        },
        get() {
          return this.goodList.every(item => item.checked)
        }
      },
      sum() {
        return this.goodList.reduce((prve, item) => {
          if (item.checked) {
            return prve + item.price * item.num
          } else {
            return prve
          }
  
        }, 0)
      }
    }
  };
  </script>
  
  <style>
  
  </style>